<template>
	<!--
		参数说明
		属性 | 名称 | 类型 | 默认值
		@size：圆环大小 | 类型 | 默认
		@title：标题（不设置则不显示）
		@content：内容（不设置则不显示）
		@btn：按钮（不设置则不显示）
		@btnComplete：按钮点击函数 
		@close：关闭函数
	-->
	<view class="m-progress-bar">
		<view :style="cBox">
			<text v-if="!slot">{{animationPercent}}%</text>
			<view  :style="slotStyle" v-if="slot"><slot name="content"></slot></view>
			<view  :style="faStyle">
				<view :style="leftBox">
					<view  :style="leftStyle"></view>
				</view>
				<view :style="rithStyle"></view>
			</view>
		</view>
				
		<view class="circle" :style="temp">
			<view class="circle_warp left">
<!-- 				 :style="{transform:'rotate('+leftDeg+'deg)'}" -->
				<text class="circle__bar"></text>
			</view>
			<view class="circle_warp right">
			<!-- 	 :style="{transform:'rotate('+rightDeg+'deg)'}" -->
				<text class="circle__bar"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"m-progress-bar",
		props:{
			// 大小
			size:{
				type:Number,
				default:60
			},
			
			// 进度条颜色
			circleColor:{
				type:String,
				default:'#32CDA5'
			},
			
			// 圆环背景色
			defaultColor:{
				type:String,
				default:'#e9e9e9'
			},
			
			// 圆环宽度
			circleWidth:{
				type:Number,
				default:5
			},
			
			// 百分比
			percent:{
				type:Number,
				default:0
			},
			
			// 动画效果
			animation:{
				type:Boolean,
				default:false
			},
			
			// 帧动画间隔
			animationSpeed:{
				type:Number,
				default:1
			},
			
			// 动画方向
			clockwise:{
				type:Boolean,
				default:true
			},
			
			// 自定义起点位置
			direction:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				animationPercent:0
				// leftDeg:0,
				// rightDeg:0,
			};
		},
		mounted() {
			if(this.animation){
				this.loadAnimation();
			}
			else{
				this.animationPercent=this.percent;
			}
		},

		methods:{
			//动画加载方法
			loadAnimation(){
				this.animationPercent = 0;
				var that = this;
				var i = setInterval(()=>{
					if(that.animationPercent>=that.percent){
						clearInterval(i);
						that.$emit('onComplete');
					}
					else{
						that.animationPercent+=1;
						that.$emit('animationPercent',that.animationPercent);
					}
					
				},that.animationSpeed);
			},

			
		},
		computed: {
			sizeAdapter(){
				return  this.size%2==0?this.size:(this.size-1);				
			},
			slot(){
				
				if(this.$slots.content){
					return true;
				}
				return false;
			},
			cBox(){
				
				var size=this.sizeAdapter;
				var circleWidth = this.circleWidth;
				var style=
					`	
						position:relative !important;
						height:${circleWidth*2+size}px !important;
						width:${circleWidth*2+size}px !important;
						display:flex !important;
						justify-content: center !important;
						align-items: center !important;
					`;
					return style;
			},
			slotStyle(){
				var size=this.sizeAdapter;
				var circleWidth = this.circleWidth;
				var style=
					`
						border-radius:50% !important;
						height:${size}px !important;
						width:${size}px !important;
						display:flex !important;
						justify-content: center !important;
						align-items: center !important;
					`;
					return style;
			},
			faStyle(){
				var size= this.sizeAdapter;
				var circleWidth = this.circleWidth;
				var defaultColor = this.defaultColor;
				var direction = this.direction;
				var clockwise = this.clockwise;
				var style = `
							 position:absolute !important;
							 border-radius:50% !important;
							 display:flex !important;
							 justify-content: center !important;
							 align-items: center !important;
							 top:0 !important;
							 left:0 !important;
							 height:${size}px !important;
							 width:${size}px !important;
							 border:${circleWidth}px ${defaultColor} solid !important;
							 transform:rotate(${direction}deg) rotateY(${clockwise?0:180}deg) !important;
							`;
				return style;
			},
			leftBox(){
				var size = this.sizeAdapter;
				var circleWidth = this.circleWidth;
				var style=`
					height:${circleWidth*2+size}px !important;
					width:${circleWidth*2+size}px !important;
					position:absolute !important;
					top:-${circleWidth}px !important;
					left:-${circleWidth}px !important;
					opacity:1 !important;
					clip:rect(0 ${(circleWidth*2+size)/2}px ${(circleWidth*2+size)}px 0) !important;
				`;
				return style;
			},
			leftStyle(){
				var top = this.top;
				var clockwise = this.clockwise;
				var size = this.sizeAdapter;
				var circleColor = this.circleColor;
				var circleWidth = this.circleWidth;
				var percent = this.animation?this.animationPercent:this.percent;
				var style;
				style= `
					height:${size}px !important;
					width:${size}px !important;
					border:${circleWidth}px ${circleColor} solid !important;
					border-radius:50% !important; 
					z-index:0 !important;
					position:absolute !important;
					top:0px !important;
					left:0px !important;
					transform:rotate(${percent>50?180:(percent/100*360)}deg) !important;
					clip:rect(0 ${circleWidth*2+size}px ${circleWidth*2+size}px ${(circleWidth*2+size)/2}px ) !important;
					`;
				return style;
			},
			rithStyle(){
				var direction = this.direction;
				var size = this.sizeAdapter;
				var circleColor = this.circleColor;
				var defaultColor = this.defaultColor;
				var circleWidth = this.circleWidth;
				var percent = this.animation?this.animationPercent:this.percent;
				var style= `
							 height:${size}px !important;
							 width:${size}px !important;
							 position:absolute;
							 border:${circleWidth}px ${percent>50?circleColor:defaultColor} solid !important;
							 border-radius:50% !important;
							 z-index:${percent>50?0:100} !important;
							 position:absolute !important;
							 top:-${circleWidth}px;
							 left:-${circleWidth}px;
							 transform:rotate(${percent>50?percent/100*360:0}deg) !important;
							 clip:rect(0 ${circleWidth*2+size}px ${circleWidth*2+size}px ${(circleWidth*2+size)/2}px ) !important; 
							`;

				return style;
			},
			temp:function(){
				let on =  parseInt(this.num);
				let all = parseInt(this.allNum);
				let scale = parseInt((on / all) * 360);
				let leftdeg = 0;
				let rightdeg = 0;
				let barcolor = '#ffd426';
				let opacitycolor = 'rgba(255,212,38,.2)';
				if(scale <= 180){
					rightdeg = scale;
				}
				if(scale > 180 && scale < 360){
					rightdeg = 180;
					leftdeg = scale - 180;
				}
				if(scale >= 250){
					barcolor = '#36b368';
					opacitycolor = 'rgba(54,179,104,.2)';
				}
				if(scale >= 360){
					rightdeg = leftdeg = 180;
				}
				return '--barcolor: '+barcolor+';--opacitycolor:'+opacitycolor+';--leftdeg:'+leftdeg+'deg;--rightdeg:'+rightdeg+'deg;'
			},
		}
	}
</script>

<style lang="scss">
	// .circle{
	// 	position: relative;
	// 	width: 18px;
	// 	height: 18px;
	// 	background-color: transparent;
	// 	&_warp{
	// 		position: absolute;
	// 		width: 50%;
	// 		height: 100%;
	// 		top: 0;
	// 		z-index: 1;
	// 		overflow: hidden;
	// 	}
	// 	&_warp.left{
	// 		left: 0;
	// 	}
	// 	&_warp.left &__bar{
	// 		left: 100%;
	// 		border-top-right-radius: 80px;
	// 		border-bottom-right-radius: 80px;
	// 		border-left: 0;
	// 		-webkit-transform-origin: center left;
	// 		transform-origin: center left;
	// 		transform:rotate(var(--leftdeg));
	// 		// animation: loading-left 1s linear forwards 1.8s;
	// 	}
	// 	&_warp.right{
	// 		right: 0;
	// 	}
	// 	&_warp.right &__bar{
	// 		left: -100%;
	// 		border-top-left-radius: 80px;
	// 		border-bottom-left-radius: 80px;
	// 		border-right: 0;
	// 		-webkit-transform-origin: center right;
	// 		transform-origin: center right;
	// 		transform:rotate(var(--rightdeg));
	// 		// animation: loading-right 1.8s linear forwards;
	// 	}
	// 	&__bar{
	// 		width: 100%;
	// 		height: 100%;
	// 		background: transparent;
	// 		position: absolute;
	// 		top: 0;
	// 		border: 3px solid var(--barcolor);
	// 		transition: all 1s;
	// 	}

	// }
	// .circle:after{
	// 	position: absolute;
	// 	// left: 1px;
	// 	// right: -1px;
		
	// 	content: '';
	// 	width: 100%;
	// 	height: 100%;
	// 	box-sizing: border-box;
	// 	border: 3px solid var(--opacitycolor);
	// 	border-radius: 50%;
	// 	transition: all 1s;
	// }
	// @keyframes loading-right{
	//     0%{
	//         transform: rotate(0deg);
	//     }
	//     100%{
	//         transform: rotate(var(--rightdeg));
	//     }
	// }
	// @keyframes loading-left{
	//     0%{
	//         transform: rotate(0deg);
	//     }
	//     100%{
	//         transform: rotate(var(--leftdeg));
	//     }
	// }

</style>